<#import "/spring.ftl" as spring />
<#import "../layout/defaultLayout.ftl" as layout>
<@layout.defaultLayout styles=["bootstrap-table/bootstrap-table.min.css",
"bootstrap-validator/css/bootstrapValidator.css",
"bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"]
scripts=["bootstrap-table/bootstrap-table.min.js",
"bootstrap-table/locale/bootstrap-table-zh-CN.min.js",
"bootstrap-validator/validator.js",
"jquery/serializejson/jquery.serializejson.min.js",
"util/jquery-dateFormat.min.js",
"bootstrap-table/extensions/export/bootstrap-table-export.min.js",
"bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js",
"bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js",
"bootstrap-table/extensions/editable/bootstrap-table-editable.js",
"x-editable/bootstrap3-editable/js/bootstrap-editable.js",
"bootstrap-validator/js/bootstrapValidator.js",
"util/tableExport.js","util/moment.js"]>

<div class="container-fluid">
	<div class="row">
		<div class="container">
			<div id="custom-toolbar">
				<button id="add" class="btn btn-info" data-toggle="modal" data-target="#configModel">
					<i class="glyphicon glyphicon-plus"></i> <@spring.message "button.add" />
				</button>
				<button id="edit" class="btn btn-info">
					<i class="glyphicon glyphicon-pencil"></i> <@spring.message "button.edit" />
				</button>
				<button id="delete" class="btn btn-info">
					<i class="glyphicon glyphicon-remove"></i> <@spring.message "button.delete" />
				</button>
			</div>
			<div>
				<table id="table" data-classes="table table-hover table-striped"
					data-toggle="table" data-url="<@spring.url relativeUrl="/report/config/list" >
					</@spring.url>" data-side-pagination="server"
					data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]"
					data-toolbar="#custom-toolbar" data-show-refresh="true" data-search="true"
					data-select-item-name="toolbar1" data-click-to-select="true">
					<thead>
						<tr>
							<th data-checkbox="true"></th>
							<th data-field="id" data-visible="false	"></th>
							<th data-field="code" data-align="center" data-sortable="true"><@spring.message
								"report.code" /></th>
							<th data-field="name" data-align="center" data-sortable="true"><@spring.message
								"report.name" /></th>
							<th data-field="isSum" data-align="center" data-sortable="true"><@spring.message
								"report.is_sum" /></th>
							<th data-field="state" data-align="center" data-sortable="true"><@spring.message
								"report.state" /></th>
							<th data-field="stateDate" data-align="center" data-sortable="true" data-formatter="dateFormat"><@spring.message
								"report.state_date" /></th>
						</tr>
					</thead>
				</table>

			</div>
		</div>
	</div>
</div>
<div class="modal fade" id="configModel" tabindex="-1" role="dialog" aria-labelledby="configModelLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="configModelLabel">
					模态框（Modal）标题
				</h4>
			</div>
			<div class="modal-body" id="configModelBody">
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>
				<button type="button" class="btn btn-primary">
					提交更改
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<script>
    var $table = $("#table");
	var $delete = $("#delete");
	var $add = $("#add");
	var $edit = $("#edit");
	
	function dateFormat(value, row,index){
		return moment(value).format('YYYY-MM-DD HH:mm:ss');
	}
	
    $(function(){
    	/* $add.click(function(){
    		window.location.href="/report/config/toAddConfig"
    		
     	}); */
    	$edit.click(function(){
    		var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.id
          	});
    		if(ids.length == 0){
    			//not choose record
    			bootbox.alert("<@spring.message 'msg.chooseDataWillBeEdited' />", function () {
    				return;
		      })
    		}else if(ids.length>1){
    			//only choose a record
    			bootbox.alert("<@spring.message 'msg.onlyChooseOneRecord' />", function () {
    				return;
		      })
    		}else{
        		window.location.href="/report/config/toEditConfig/"+ids;
    		}
    	});
    	
        $delete.click(function () {
        	//need to pop dialog to check
        	var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                  return row.id
            });
        	//confirm dialog
        	 bootbox.confirm("<@spring.message 'msg.confirmDelete' />", function (result) {
        		var strResult = result;
        		if(strResult){
        			$.ajax({
            	        url:'/report/config/deleteConfigByIds',
            	        type:'post',
            	        contentType: 'application/json',
            	        data:JSON.stringify(ids),
            	        dataType:'json',
            	        success:function(data){
            	        	alert("<@spring.message 'msg.deleteSuccess' />");
            	        	$table.bootstrapTable('refresh', {url: '/report/config/list'});
            	        }
            		});
        		}
      		 });
    	});
        
        $('#configModel').on('show.bs.modal', function () {
   	  		$('#configModelBody').load("/report/config/toAddConfig");
   		}); 
        
    });

</script>
</@layout.defaultLayout>